import React, { useState, useEffect } from 'react';
import {
    Table, Radio, Divider, Button, Input,
    Select, Pagination, Drawer, InputNumber, Cascader,Form
} from 'antd'
import AddGoods from '../../components/addGoods'
import { useDispatch, useSelector } from 'umi'
 

const { Option } = Select;
const layout = {
    labelCol: {
      span: 8,
    },
    wrapperCol: {
      span: 16,
    },
  };
  const tailLayout = {
    wrapperCol: {
      offset: 8,
      span: 16,
    },
  };
  
export default function Goods(props) {

    const dispatch = useDispatch()

    const goodslist = useSelector((state) => {
        return state.goodsModel.goods
    })


    useEffect(async () => {
        dispatch({
            type: "goodsModel/getGoodsSaga",
        })

    }, [])

    useEffect(async () => {

        dispatch({
            type: "goodsModel/goodstypeSaga",
        })
    }, [])
    const goodstypelist = useSelector((state) => {
        return state.goodsModel.goodstype
    })


    // console.log('商品类型数据', goodstypelist);

    function handleChange(value) {
        console.log(`选择状态或商品 ${value}`);
    }
    const [selectionType, setSelectionType] = useState('checkbox');
    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: (record) => ({
            disabled: record.name === 'Disabled User',
            // Column configuration not to be checked
            name: record.name,
        }),
    };
    // 分页
    function onChange(pageNumber) {
        console.log('Page: ', pageNumber);
    }
    function showTotal(total) {
        return `显示 ${total} 条记录，共${total}条记录`;
    }
    //   抽屉
    const [visible, setVisible] = useState(false);

    const showDrawer = () => {
        setVisible(true);
    };
    const onClose = () => {
        setVisible(false);
    };
  
  
    // 抽屉内容
    function onChange(value) {
        console.log('changed', value);
    }
    const columns = [
        {
            title: '图片',
            width: 80,
            dataIndex: 'photo',
            key: '1',
            fixed: 'left',
            render: (photo) => <img style={{ width: "50px", height: "50px" }} src={photo} />
        },
        {
            title: '商品名称',
            width: 400,
            dataIndex: 'name',
            key: '2',
        },
        { title: '商品类型', dataIndex: 'gname', width: 100, key: '3' },
        // { title: '服务类型', dataIndex: 'address', key: '4' },
        {
            title: '状态', dataIndex: 'status', key: '5',
            render: (status) => status == 1 ? "上架" : "暂无"
        },
        { title: '价格', dataIndex: 'price', key: '6' },
        { title: '数量', dataIndex: 'counts', key: '7' },
        { title: '点赞数', dataIndex: 'likes', key: '8' },
        // { title: '描述', dataIndex: 'address', key: '9' },
        {
            title: '操作', dataIndex: 'up', key: '10',
            render: () => {
                return (
                   <div>
                         <Button type="primary" onClick={showDrawer}>
                            修改
                        </Button>
                        <Drawer width="500px" title="修改商品" placement="right" onClose={onClose} visible={visible}>
                            <div>  商品名称：<Input style={{ width: "300px" }} /></div>
                            <div> 商品类型：<Input style={{ width: "300px" }} /></div>
                            <div>  服务类型：<Input style={{ width: "300px" }} /></div>
                            <div> 描述：<Input style={{ width: "300px" }} /></div>
                            <div> 状态：<Select defaultValue="" style={{ width: 120 }} onChange={handleChange}>
                                <Option value="jack">Jack</Option>
                                <Option value="lucy">Lucy</Option>
                                <Option value="disabled" disabled>
                                    Disabled
                                </Option>
                                <Option value="Yiminghe">yiminghe</Option>
                            </Select></div>
                            <div>价格：<InputNumber min={1} max={10} defaultValue={3} onChange={onChange} /></div>
                            <div>数量：<InputNumber min={1} max={10} defaultValue={3} onChange={onChange} /></div>
                            <div>   图片：<img src="" alt="" /></div>
                            <div>
                                <Button type="primary">提交</Button>
                                <Button>取消</Button>
                            </div>
                        </Drawer>
                   </div>
                      
                   

                )
            }
        },
        {
            title: '秒杀', dataIndex: 'miao', key: '11',
            render: () => <Button>加入秒杀</Button>
        },
    ];
    const ontypeChange = (file, value) => {
        console.log(file, value);
    }
    return (
        <div>
            <div>
                {/* <div>  商品数据{goodslist}</div> */}
            </div>
            <div style={{ display: "flex", justifyContent: "space-around" }}>
                商品名称：
                <Input style={{ width: "100px" }} />
                商品状态：
                <Select defaultValue="" style={{ width: 120 }} onChange={handleChange}>
                    <Option value="上架">上架</Option>
                    <Option value="下架"></Option>
                </Select>
                商品类型：
                <Cascader options={goodstypelist} fieldNames={{ label: "text", value: 'title', children: 'children' }} onChange={ontypeChange} />
                <Button type="primary">查询</Button>
                <Button>重置</Button>

            </div>
            <div  >
              <AddGoods goodstypelist={goodstypelist}></AddGoods>
               
            </div>

            <div>
                <Radio.Group
                    onChange={({ target: { value } }) => {
                        setSelectionType(value);
                    }}
                    value={selectionType}
                >
                </Radio.Group>

                <Divider />

                <Table
                    rowSelection={{
                        type: selectionType,
                        ...rowSelection,
                    }}
                    columns={columns}
                    dataSource={goodslist}
                    scroll={{ x: 1300 }}

                    bordered
                    pagination={{ total: 1 - 50, showTotal: showTotal, defaultCurrent: 2, total: 500, onChange: onChange }}
                />

            </div>
        </div>
    )
}
